<template>
  <div>
    <div class="search">
      <van-search
        class="left"
        v-model="value"
        placeholder="请输入搜索关键词"
        @search="search"
      />
      <van-button round type="info" class="right" @click="search" size="mini">搜索</van-button>
    </div>
    <h5>历史记录<van-icon @click="remove" name="cross" /></h5>
    <van-panel>
      <div v-for="(item,index) in history" :key="index" v-show="index < 9">{{item}}</div>
    </van-panel>
  </div>
</template>

<script>
import {Dialog} from "vant"

export default {
  data() {
    return {
      value:'',
      history:JSON.parse(localStorage.getItem("history")) || [],
    };
  },
  methods: {
    search(){
      this.history.unshift(this.value);
      localStorage.setItem("history",JSON.stringify(this.history));
      this.$router.push({path:"/list",query:{value:this.value}});
    },
    remove(){
      Dialog.confirm({
        title:"删除",
        message:"确定删除记录吗？？",
      }).then(()=>{
        this.history = [];
        localStorage.removeItem('history')
      })
    }
  },
}
</script>

<style lang="scss">
  .search{
    display: flex;
    align-items: center;
    .left{
      flex: 5;
    }
    .right{
      left: 1;
      height: 35px;
    }
  }  
</style>

